<template>
  <div class="login_pages">
    
    <div class="top-box">
      <div class="top-box-inner"></div>
      <img class="img" @click="goh" src="/img/lfh4.png" alt="">
    </div>

    <div class="card">
      <h1>登录</h1>
      <div class="main_panel">
        <p>
          <!-- //用户名 -->
          <i class="iconfont icon-yonghu-copy"></i>
          <input
            type="text"
            placeholder="请输入用户名"
            ref="ipt_uname_value"
            v-model="uname"
            @blur="checkName"
          />

          <i class="iconfont" ref="show_name_wrong"></i>
        </p>
        <p>
          <i class="iconfont icon-mima-copy"></i>
          <input
            type="password"
            placeholder="请输入密码"
            ref="ipt_pwd_value"
            v-model="upwd"
            @blur="checkPwd"
          />

          <i class="iconfont" ref="show_pwd_wrong"></i>
        </p>

        <button @click="checkForm">立即登录</button>

        <div class="wangjimima_zhuce">
          <a href="">忘记密码</a>
          <a @click="aa" >还未注册账号？去注册</a>
        </div>
      </div>
    </div>

    <div class="login">
      <p>其他登录方式</p>

      <div class="ways_login">
        <span><i class="iconfont icon-qq-copy"></i></span>
        <span><i class="iconfont icon-xinlangweibo-copy"></i></span>
        <span><i class="iconfont icon-weixin-copy"></i></span>
      </div>
    </div>
  </div>
</template>

<script>
import "../../src/assets/font333/iconfont.css";
import { save } from "@/utils/storage";
export default {
  data() {
    return {
      uname: "",
      upwd: "",
    };
  },

  methods: {
    goh(){
      this.$router.go(-1)
    },
    aa(){
      this.$router.push('/register')
    },
    checkName() {
      let exp = /^\w{4,15}$/;
      if (exp.test(this.uname)) {
        this.$refs.show_name_wrong.style.color = "skyblue";
        this.$refs.show_name_wrong.classList.add("icon-gouhao");
        this.$refs.show_name_wrong.classList.remove("icon-cuowu");
        return true;
      } else {
        this.$refs.ipt_uname_value.value = "";
        this.$refs.ipt_uname_value.placeholder = "用户名有误，重新输入";
        this.$refs.show_name_wrong.style.color = "red";
        this.$refs.show_name_wrong.classList.add("icon-cuowu");
        this.$refs.show_name_wrong.classList.remove("icon-gouhao");
        return false;
      }
    },

    checkPwd() {
      let exp = /^\w{6,15}$/;
      if (exp.test(this.upwd)) {
        this.$refs.show_pwd_wrong.style.color = "skyblue";
        this.$refs.show_pwd_wrong.classList.remove("icon-cuowu");
        return true;
      } else {
        this.$refs.ipt_pwd_value.value = "";
        this.$refs.ipt_pwd_value.placeholder = "请输入正确的密码";
        this.$refs.show_pwd_wrong.style.color = "red";
        this.$refs.show_pwd_wrong.classList.add("icon-cuowu");
        this.$refs.show_pwd_wrong.classList.remove("icon-gouhao");
        return false;
      }
    },

    /** 验证表单 */
    checkForm() {
      if (this.checkName() && this.checkPwd()) {
        console.log("验证成功，开始发送登录请求...");
        let params = {
          username: this.uname,
          password: this.upwd,
        };
        this.axios
          .post(
            "http://47.106.185.150/api/users/login",
            // `username=${this.uname}&password=${this.upwd}`
            params
          )
          .then((res) => {
            console.log(res); //打印服务器响应信息
            // console.log(res.data.msg); //打印出成功或失败的信息
            // console.log(res.data.code); //打印出成功或失败的数字代码  成功200 失败404
            // console.log('用户名',this.uname);
            if (res.data.code == 200) {

              
               this.$store.commit('Loginok', this.uname)              
              // 弹窗跳转
              if(this.$route.path=='/') return    //防止当前路径的重复跳转
              //状态码为200，即登录成功
              // 保存返回来的token
              save("AUTH", { token: res.data.data.token });
              this.$router.push("/"); //跳转到首页
            } else {
              //登录失败
              this.$refs.ipt_uname_value.value = "";
              this.$refs.ipt_uname_value.placeholder = "用户名或密码有误";
              this.$refs.show_name_wrong.style.color = "red";
              this.$refs.show_name_wrong.classList.add("icon-cuowu");
              this.$refs.show_name_wrong.classList.remove("icon-gouhao");
              return false;
            }
          });
      }
    },

    // ···
  },
};
</script>

<style lang="scss" scoped>
.img{
  width: 35px; height: 35px;
  position: relative;
  top: -48vw;   left: 4vw;
}
.top-box {
  overflow: hidden;
  /* 因为内部伪元素width:140%,必然超出屏幕，所以要溢出隐藏 */
}

.top-box-inner {
  position: relative;
  width: 100%;
  height: 200px;
  /* 定位 */
}

.top-box-inner:after {
  /* 这个伪类的作用就是一个圆弧的背景色 */
  width: 140%;
  height: 200px;
  position: absolute;
  left: -20%;
  /* 之所以left:20%,是因为width:140%，宝贝可以是是别的值，例如width:160%，那么left:30%才能水平居中，可以发现规律的 */
  top: 0;
  z-index: -10;
  /*层叠顺序，最底层显示*/
  content: "";
  border-radius: 0 0 50% 50%;
  /*分别对应 左上 右上 右下 左下*/
  // background-color: #000000;

  // background: url(1.jpg) center;
  // background: url(../../src/assets/img/1.jpg) center no-repeat;
  background: url(../../src/assets/img/1.jpg) center;

  /* 将这个伪类水平居中 */
}

.card {
  z-index: 9999;
  border-radius: 7vw;
  width: 82vw;
  height: 80vw;
  background-color: white;
  box-shadow: 0px 0px 3px 3px #eee;
  margin: auto;
  margin-top: -10vh;

  h1 {
    text-align: center;
    padding: 8% 0;
    color: #fad43c;
    font-size: 22px;
  }
  .main_panel {
    margin: 0 10%;
    p {
      padding-bottom: 2vw;
      border-bottom: 1px solid rgb(209, 207, 207);
      margin-bottom: 8px;
      i {
        padding-left: 5px;
        color: #fad43c;
      }
      input {
        padding-left: 15px;
        border: 0;
        outline: none;
        color: #999;
        // background-color: rgba(0, 0, 0, 0);
      }
    }

    button {
      margin-top: 5%;
      // display: block;
      background-color: #fad43c;
      width: 100%;
      height: 8vw;
      line-height: 8vw;
      border-radius: 10vw;
      color: white;
      border: 0;
    }

    .wangjimima_zhuce {
      // margin-top: 3%;
      margin-top: 8%;
      display: flex;
      justify-content: space-between;

      a {
        text-decoration: none;
        color: #999;
        font-size: 12px;
      }
    }
  }
}

.login {
  /* margin-top: 100px; */
  width: 100vw;
  height: 44.3vw;
  // background-color: aqua;

  // background-color: black;
  p {
    text-align: center;
    padding: 10%;
    color: #999;
    font-size: 13px;
  }
  .ways_login {
    display: flex;
    justify-content: space-evenly;
  }

  i {
    color: #c3c3c3;
    font-size: 20px;
    padding: 5px;
    border: 2px solid rgb(207, 203, 203);
    border-radius: 50%;
  }
}
</style>